<template>
    <el-container id="regBox">
        <el-container class="smallLogin">
            <el-header style="height: 85px">
                <el-row class="headerLeft">
                    <img src="../assets/img/login/logo.png" alt="" width="44" height="38" @click="gotoHome">
                    <p @click="gotoHome">中达企业数据链</p>
                </el-row>
                <el-row class="headerRight">
                    <img src="../assets/img/login/back.png" alt="" width="30" height="19" @click="gotoHome">
                </el-row>
            </el-header>
            <el-main>
                <el-row>
                    <img src="../assets/img/register/reg.png" alt="" width="281" height="326">
                    <!--<p class="login-tips">Tips：忘记密码请联系网络管理员重置密码</p>-->
                </el-row>
                <el-form :model="ruleForm" ref="ruleForm" label-width="0px" class="ms-content">
                    <el-form-item>
                        <img src="../assets/img/register/c4.png" alt="" width="20" height="16">
                        <el-input v-model="ruleForm.email"
                                  :class="hasMail || isSubmit? '' : 'error'"
                                  placeholder="请输入邮箱地址"
                                  @keyup.enter.native="submitForm('ruleForm')"
                                  autofocus="true"
                                  @blur="checkMail">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <img src="../assets/img/register/c2.png" alt="" width="18" height="20">
                        <el-input v-model="ruleForm.phone"
                                  :class="hasPhone || isSubmit ? '' : 'error'"
                                  placeholder="请输入手机号码"
                                  @keyup.enter.native="submitForm('ruleForm')"
                                  autofocus="true"
                                  @blur="checkPhone1"
                                  @input="checkPhone">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <img src="../assets/img/register/c3.png" alt="" width="20" height="16">
                        <el-input v-model="ruleForm.checkMa"
                                  :class="hasMa || isSubmit ? '' : 'error'"
                                  placeholder="请输入手机验证码"
                                  @keyup.enter.native="submitForm('ruleForm')"
                                  autofocus="true"
                                  @blur="checkCheckMa">
                        </el-input>
                        <el-button round class="checkMa" :disabled="canuse" @click="getCheckMa"><span v-if="time == 0 ">获取验证码</span><span v-else>{{time}}秒后重新获取</span></el-button>
                    </el-form-item>
                    <el-form-item>
                        <img src="../assets/img/login/pwd.png" alt="" width="20" height="16">
                        <el-input auto-complete="new-password"
                                  :class="hasPwd || isSubmit ? '' : 'error'"
                                  v-model="ruleForm.pwd"
                                  placeholder="请输入密码(长度6~20位)"
                                  show-password
                                  @keyup.enter.native="submitForm('ruleForm')"
                                  autofocus="true"
                                  @blur="checkpwd">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <img src="../assets/img/login/pwd.png" alt="" width="20" height="16">
                        <el-input auto-complete="new-password"
                                  :class="hasPwd1 || isSubmit ? '' : 'error'"
                                  v-model="ruleForm.repwd"
                                  placeholder="请确认密码"
                                  show-password
                                  @keyup.enter.native="submitForm('ruleForm')"
                                  autofocus="true"
                                  @blur="checkRepwd">
                        </el-input>
                    </el-form-item>
                    <div class="login-btn">
                        <el-button type="primary" @click="submitForm">重置密码</el-button>
                    </div>
                    <p>已有账号了，<span @click="gotoLogin" class="gotoLogin">我要去登录</span></p>
                </el-form>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'
  export default {
    data: function(){
      return {
        isRouterAliveBox:true,
        loginVisible: false,
        ruleForm: {
          companyName: "",
          name:"",
          phone:"",
          checkMa:"",
          email:"",
          pwd:"",
          repwd:""
        },
        hasCName:false,
        hasName:false,
        hasPhone:false,
        hasMa:false,
        hasMail:false,
        hasPwd:false,
        hasPwd1:false,
        canuse:true,
        isSubmit:true,
        time:0,
        href:"",
        timer:null
      }
    },
    mounted(){
      console.log(window.location.href.split("/index.html")[0])
      this.href = window.location.href.split("/index.html")[0];
      // http://192.168.11.113:8083/index.html#/login?redirect=%2F
    },
    methods: {
      ...mapMutations(['getUserDirId', 'fileInfo']),

      gotoHome(){
        window.location.href=this.href;
      },
      reloadFun() {
        this.isRouterAliveBox = false;
        this.$nextTick(function () {
          this.isRouterAliveBox = true;
        })
      },
      getCheckMa(){
        if(this.ruleForm.phone == ""){
          this.$message.error("请先输入手机号");
          return;
        }
        this.$http.post("/sms/sendSmsCode",{
          phone:this.ruleForm.phone
        }).then(res=>{
          console.log(res);
          if(res.status == 200){
            this.time = 60;
            this.timer = setInterval(()=>{
              this.canuse = true;
              this.time--;
              if(this.time == 0){
                this.canuse = false;
                clearInterval(this.timer)
              }
            },1000)
            if(res.data == 1){
              this.$message.error(res.msg);
            }
          }
        })
      },
      checkPhone1() {
        if (this.ruleForm.phone == "") {
          this.hasPhone = false;
          return;
        }
        let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!reg.test(this.ruleForm.phone)) {
          this.canuse = true;
          this.$message.error("手机号码格式不正确");
          return;
        }
      },
      checkPhone(){
        this.canuse = true;
        if(this.ruleForm.phone.length  == 11) {
          let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
          if (!reg.test(this.ruleForm.phone)) {
            this.canuse = true;
            this.$message.error("手机号码格式不正确");
            return;
          }else{
            this.canuse = false;
          }
          return true;
        }
      },
      checkCheckMa(){
        if(this.ruleForm.checkMa == ""){
          // this.$message.error("验证码不能为空");
          this.hasMa = false;
          return;
        }
        return true;
      },
      checkMail(){
        if(this.ruleForm.email == ""){
          // this.$message.error("邮箱不能为空");
          this.hasMail = false;
          return;
        }
        var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
        if (!re.test(this.ruleForm.email)) {
          this.$message.error("邮箱格式不正确");
          return;
        }
        this.$http.post("/company/checkEmail",{
          userEmail:this.ruleForm.email
        }).then(res=>{
          console.log(res);
          if(res.status == 200){
            if(res.data == 0){
              this.$message.error(res.msg);
              return;
            }
          }
        })
        return true;
      },
      checkpwd(){
        if(this.ruleForm.pwd == ""){
          // this.$message.error("密码不能为空");
          this.hasPwd = false;
          return;
        }
        console.log(this.ruleForm.pwd.length);
        if (this.ruleForm.pwd.length<6 || this.ruleForm.pwd.length>20) {
          this.$message.error("密码长度6-20位");
          return;
        }
        return true;
      },
      checkRepwd(){
        if(this.ruleForm.repwd == ""){
          // this.$message.error("密码不能为空");
          this.hasPwd1 = false;
          return;
        }
        if(this.ruleForm.repwd !== this.ruleForm.pwd ){
          this.$message.error("两次输入密码不一致");
          return;
        }
        return true;
      },
      gotoLogin(){
        this.$router.push("/login")
      },
      submitForm() {
        this.isSubmit = false;
        if(this.checkCheckMa() && this.checkMail() && this.checkPhone() && this.checkpwd() && this.checkRepwd()){
          this.$http.post("/user/resetPass",{
            email:this.ruleForm.email,
            password:this.ruleForm.pwd,
            phone:this.ruleForm.phone,
            smsCode:this.ruleForm.checkMa
          }).then(res=>{
            console.log("注册信息",res);
            if(res.status == 200){
                this.$message({
                  type:"success",
                  message:"重置成功"
                })
                sessionStorage.setItem("userMail",this.ruleForm.email);
                this.$router.push("/login");
            }else{
              this.$message.error(res.msg);
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss">

    #regBox{
        .error{
            input::-webkit-input-placeholder{
                color: #ee7471;
                font-size: 12px;
            }
        }

        .login-btn .el-button{
            margin-top:41px;
            width: 320px;
            border-radius:27px;
            background:rgba(84,157,232,1);
            height: 54px;
            span{
                font-size: 18px;
                color: white;
                margin-top: 0;
            }
        }
        .login-btn .el-button:hover{
            background:rgba(84,157,232,.9)!important;
        }
        .checkMa{
            span{
                margin-top: -4px;
                color:#999999;
                font-size: 12px;
            }
        }
        .el-form-item__content{
            display: flex;
            align-items: center;
            overflow: hidden;
            padding-bottom:1px;
            border-bottom:1px solid #ccc!important;
        }
        .el-input__inner,.el-form-item.is-success{
            border: 0 !important;
            border-radius: 0!important;
            background: white!important;
            height: 48px;
            line-height:48px;
        }
    }
</style>
<style scoped lang="scss">
    #regBox{
        background: url("../assets/img/login/bk.jpg") no-repeat;
        background-size: 100% 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .checkMa{
            width: 86px;
            height: 29px;
            display: flex;
            justify-content: center;

        }
        .smallLogin{
            background: white;
            max-width: 780px;
            height: 480px;
            .el-header{
                display: flex;
                justify-content: space-between;
                line-height: 40px;
                padding:26px 20px 26px 40px;
                .headerLeft{
                    cursor:pointer;
                    display: flex;
                    img{
                        margin-right: 11px;
                    }
                    p{
                        font-size:18px;
                        font-family:SourceHanSansCN-Medium;
                        font-weight:500;
                        color:rgba(43,43,43,1);
                    }
                }
                .headerRight{
                    cursor:pointer;
                    img:hover{
                        opacity: .9;
                    }
                }
            }
            .el-main{
                padding:0 40px;
                justify-content: space-between;
                display: flex;
                .login-tips{
                    margin-top: 21px;
                    font-size:14px;
                    font-family:SourceHanSansCN-Medium;
                    font-weight:500;
                    color:rgba(204,204,204,1);
                }
                .login-btn .el-button{
                    margin-top:30px;
                    width: 320px;
                    border-radius:27px;
                    background:rgba(84,157,232,1);
                    height: 54px;
                }
                .el-form{
                    overflow: hidden;
                    p{
                        margin-top: 20px;
                        float: right;
                        font-size:14px;
                        font-family:SourceHanSansCN-Medium;
                        font-weight:500;
                        color:rgba(102,102,102,1);
                        span{
                            color:#549DE8;
                        }
                        span:hover{
                            opacity: .9;
                        }
                    }
                }
                .el-form-item{
                    margin: 0;
                    img{
                        margin-left: 10px;
                        margin-right: 5px;
                    }
                }
                .login-btn .el-button:hover{
                    background:rgba(84,157,232,.9);
                }

            }
            .gotoLogin{
                cursor: pointer;
            }
        }
    }
</style>